<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible44" width="70%">
      <el-form labelWidth="150px">
        <el-form-item label="车务类型" class="is-required">
          <el-select v-model="addcarsever.servertype" placeholder="请选择" style="width:100%">
            <el-option v-for="item in itemdata" :key="item.value" :label="item.hash.code_name" :value="item.hash.code_id"></el-option>
          </el-select>
          <div class="el-form-item__error" v-if="!$v.addcarsever.servertype.required">请选择车务类型</div>
        </el-form-item>
        <el-form-item label="车务编号" class="is-required">
          <el-input placeholder="请输入" style="margin-right:10px" v-model="addcarsever.carserverno" :disabled="disable"></el-input>
          <div class="el-form-item__error" v-if="!$v.addcarsever.carserverno.required">请输入车务编号</div>
          <!-- <div class="el-form-item__error" v-if="!$v.addcarsever.carserverno.alphaNum">
            车务编号格式错误
          </div>-->
        </el-form-item>
        <el-form-item label="牌照" class="is-required">
          <selectcarnumber @getpersonid2="getpersonid2" :itempersonid="addcarsever.carid" :itemtype="2"></selectcarnumber>
        </el-form-item>
        <el-form-item label="办理日期" class="is-required">
          <el-date-picker v-model="addcarsever.servertime" type="date" style="width:100%" placeholder="选择日期"
            valueFormat="yyyy-MM-dd"
          ></el-date-picker>
          <div class="el-form-item__error" v-if="!$v.addcarsever.servertime.required">请选择办理日期</div>
        </el-form-item>
        <el-form-item label="下次办理日期" class="is-required">
          <el-date-picker v-model="addcarsever.nexttime" type="date" style="width:100%" placeholder="选择日期"
            valueFormat="yyyy-MM-dd"
          ></el-date-picker>
          <div class="el-form-item__error" v-if="!$v.addcarsever.nexttime.required">请选择下次办理日期</div>
        </el-form-item>
        <el-form-item label="商户" class="is-required">
          <el-input placeholder="请输入" style="margin-right:10px" v-model="addcarsever.shop"></el-input>
          <div class="el-form-item__error" v-if="!$v.addcarsever.shop.required">请输入商户</div>
        </el-form-item>
        <el-form-item label="费用" class="is-required">
          <el-input placeholder="请输入" style="margin-right:10px" v-model="addcarsever.serveramount"></el-input>
          <div class="el-form-item__error" v-if="!$v.addcarsever.serveramount.required">请输入费用</div>
          <div class="el-form-item__error" v-if="!$v.addcarsever.serveramount.money">费用格式有误</div>
        </el-form-item>
        <el-form-item label="办理人" class="is-required">
          <searchperson ref="name" @getpersonid="getpersonid" :itempersonid="addcarsever.carholder"></searchperson>
        </el-form-item>
        <el-form-item label="备注" class="is-required">
          <el-input placeholder="" style="margin-right:10px" v-model="addcarsever.remark"></el-input>
        </el-form-item>
        <el-form-item label="上传附件" style="width:100%">
          <upload2 :ispic="false" :filelimit="3" :filelink.sync="filelink"></upload2>
        </el-form-item>
        <el-form-item>
          <span>&nbsp;</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" style="padding-top:130px;">
        <el-button size="mini" @click="dialogVisible44 = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addservice">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import selectcarnumber from '~/components/common/selectcarnumber.vue';
import searchperson from '~/components/common/searchperson.vue';
import upload2 from '~/components/common/upload2.vue';
import { required } from 'vuelidate/lib/validators';
import { regex } from 'vuelidate/lib/validators/common.js';

const money = regex('money', /^\d{1,8}(\.\d{1,2})?$/);

export default {
  validations: {
    addcarsever: {
      servertype: {
        required,
      },
      carserverno: {
        required,
      },
      servertime: {
        required,
      },
      nexttime: {
        required,
      },
      shop: {
        required,
      },
      serveramount: {
        required,
        money,
      },

    },
  },
  components: {
    selectcarnumber,
    upload2,
    searchperson,
  },
  props: {
    itemdata: Array,
    chousebtn: Number,
    chouseval: Array,
  },
  data() {
    return {
      disable: false,
      title: '添加车务信息',
      dialogVisible44: true,
      radio1: '',
      changeval: 0,
      ts: this.newStore(),
      addcarsever: {
        servername: '', // 车务类型
        carrepairid: '', // 维修id
        servertime: '', // 办理日期
        nexttime: '', // 下次办理日期
        servertype: '', // 车务编号
        serveramount: '', // 费用
        shop: '', // 商家
        carid: '', // 车辆编号
        carno: '', // 车牌号
        carholder: '', // 办理人id
        carholdername: '',
        remark: '', // 办理人val
      },
      filelink: [], // 附件
      fielname: [],
      fileurl: [],
    };
  },
  created() {
    this.getitemval();
    if (this.chousebtn == 2) {
      this.title = '修改车务信息';
      this.disable = true;
    }
  },
  methods: {
    // 编辑渲染信息
    getitemval() {
      this.addcarsever = {};
      if (this.chouseval.length > 0 && this.chousebtn == 2) {
        let b = {};
        this.chouseval.forEach((item) => {
          b = item;
        });
        this.addcarsever = Object.assign({}, b.hash);
        // console.log(this.chouseval, "22225");
        const req = {
          handle: '0E56125B90D2898ACAD2C3968249185CCD3A43E9777C4E90',
          filetype: 'carserver',
          mainid: this.chouseval[0].hash.carserverno,
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          if (ts.d.sflag == 'success') {
            const b = [];
            for (let i = 0; i < ts.d.data.operation1.length; i += 1) {
              b.push(ts.d.data.operation1[i].hash);
            }
            for (let l = 0; l < b.length; l += 1) {
              this.filelink.push({ name: b[l].filename, url: b[l].fileurl });
            }
          }
        });
      }
    },

    // 获取cardid
    getpersonid2(val) {
      this.addcarsever.carid = val.id2;
      this.addcarsever.carno = val.id;
    },
    // 获取办理人
    getpersonid(val) {
      console.log();
      this.changeval = 1;
      this.addcarsever.carholder = val.id;
      this.addcarsever.carholdername = val.value;
      console.log(this.addcarsever.carholdername, 'this.addcarsever.carholdername');
    },
    // 添加/修改车务信息
    addservice() {
      this.fielname = [];
      this.fileurl = [];
      // console.log(this.chousebtn, "999");
      for (let m = 0; m < this.filelink.length; m += 1) {
        this.fielname.push(this.filelink[m].name);
        this.fileurl.push(this.filelink[m].url);
      }
      console.log(this.$refs.name, 'this.$refs.name');
      if (this.$v.$invalid) {
        this.$message({
          type: 'error',
          message: ' 请仔细核对填写信息',
        });
      } else if (this.chousebtn == 1) {
        this.$confirm('是否添加该车辆车务信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const req = {
            handle:
              '0E56125B90D2898A9F595BEEBE51B7F26A5DB7E95B1EBCC3BFF0B9210751F692',
            carserverno: this.addcarsever.carserverno,
            servertime: this.addcarsever.servertime,
            nexttime: this.addcarsever.nexttime,
            shop: this.addcarsever.shop,
            servertype: this.addcarsever.servertype,
            carholder: this.addcarsever.carholder,
            carid: this.addcarsever.carid,
            serveramount: this.addcarsever.serveramount,
            fielname: this.fielname,
            fileurl: this.fileurl,
            remark: this.addcarsever.remark,
          };
          this.spost(this.ts, '/mainservlet', req).then((ts) => {
            if (ts.d.sflag == 'success') {
              this.$message({
                type: 'success',
                message: '添加成功!',
              });
              this.dialogVisible44 = false;
              this.$emit('update:addcarsever', this.addcarsever);
            }
          });
        });
      } else if (this.chousebtn == 2) {
        if (this.changeval == 1) {
          this.addcarsever.carholdername = this.addcarsever.carholder;
        }
        this.$confirm('是否修改该车辆车务信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const req = {
            handle:

              '0E56125B90D2898A7B4BD3DD83448657BC6D75ABEF227A912A627B28599CDF12',
            carserverid: this.addcarsever.carserverid,
            carserverno: this.addcarsever.carserverno,
            servertime: this.addcarsever.servertime,
            nexttime: this.addcarsever.nexttime,
            shop: this.addcarsever.shop,
            servertype: this.addcarsever.servertype,
            carholder: this.addcarsever.carholder,
            carid: this.addcarsever.carid,
            serveramount: this.addcarsever.serveramount,
            fielname: this.fielname,
            fileurl: this.fileurl,
            remark: this.addcarsever.remark,
          };
          this.spost(this.ts, '/mainservlet', req).then((ts) => {
            console.log(req, 'rewq');
            if (ts.d.sflag == 'success') {
              this.$message({
                type: 'success',
                message: '修改成功!',
              });
              this.dialogVisible44 = false;
              this.$emit('update:addcarsever', this.addcarsever);
            }
          });
        });
      }
    },
  },
};
</script>


<style scoped>
.el-form-item {
  width: 50%;
  margin-bottom: 22px;
  float: left;
}
.statusspan {
  display: inline-block;
  width: 30px;
  height: 30px;
}
</style>
